<template>

  <div class="verify">
    <div class="verify-success" :class="{'show':showSuccess}">
      <p>{{options.success}}</p><span>{{options.successSub}}</span>
    </div>
    <div class="verify-error" :class="{'show':showError}">
      <p>{{options.error}}</p><span @click="again" class="verify-btn">{{options.errorSub}}</span>
    </div>
    <div class="verify-title">请点击{{area.label}}区域的{{position.label}}</div>
    <div class="verify-area">
      <div class="verify-item" v-for="(item,index) in options.area" :key="index" :style=" 'background:'+item.value ">
        <div class="verify-item-wrap">
          <span v-for="(pos,idx) in options.position" @click="userClick(item.key,pos.key)" :key="idx">
            {{ options.mode === 'shape' ? pos.label : '' }}
          </span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  props: ['opt'],
  data() {
    return {
      options: {
        mode: 'position',
        area: [
          { key: 1, value: 'rgb(255, 237, 237)', label: '红色' },
          { key: 2, value: 'rgb(208, 252, 223)', label: '绿色' },
          { key: 3, value: 'rgb(255, 240, 199)', label: '橘黄色' }
        ],
        position: [
          { key: 1, label: '左上方位置' },
          { key: 2, label: '正上方位置' },
          { key: 3, label: '右上方位置' },
          { key: 4, label: '左边位置' },
          { key: 5, label: '中间位置' },
          { key: 6, label: '右边位置' },
          { key: 7, label: '左下方位置' },
          { key: 8, label: '正下方位置' },
          { key: 9, label: '右下方位置' }
        ],
        success: 'Success!',
        successSub: 'Good job,dude!',
        error: 'Error...',
        errorSub: 'Try again'
      },
      area: null,
      position: null,
      showSuccess: false,
      showError: false
    }
  },
  created() {
    this.options = { ...this.options, ...this.opt }
    // 初始化验证
    this.setNewVerify();
  },
  methods: {
    setNewVerify() {
      this.showError = false;
      this.showSuccess = false;
      if (this.options.mode === 'shape') {
        let t, j, arr = this.options.position, _LEN_ = arr.length;
        while (_LEN_) {
          j = Math.floor(Math.random() * _LEN_--);
          t = arr[_LEN_];
          arr[_LEN_] = arr[j];
          arr[j] = t;
        }
      }

      const AREA = this.options.area, POSITION = this.options.position;
      //随机选取一个区域与位置
      this.area = AREA[Math.floor(Math.random() * AREA.length)];
      this.position = POSITION[Math.floor(Math.random() * POSITION.length)];
    },
    userClick(a, b) {
      let result = this.area.key === a && this.position.key === b;
      this.showSuccess = result;
      this.showError = !result;
      this.$emit('result', result)
    },
    again() {
      //重新初始验证
      this.setNewVerify();
    }
  }
}
</script>

<style scoped>
.verify {
  background: #fff;
  /* border-radius: 5px; */
  /* border: 1px solid #bbb; */
  position: relative;
  display: inline-block;
  /* padding: 20px; */
  text-align: center;
  font-size: 13px;
  overflow: hidden;
}
.verify .verify-title {
  padding-bottom: 10px;
  color: #aaa;
}
.verify .verify-area .verify-item {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  border: 1px solid #fff;
}
.verify .verify-area .verify-item .verify-item-wrap {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 3px 0 0 3px;
}
.verify .verify-area .verify-item span {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  border: 1px dashed #ccc;
  display: block;
  margin: 3px;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  line-height: 18px;
  vertical-align: middle;
  font-size: 15px;
  color: #555;
}
.verify .verify-area .verify-item span:hover {
  border: 1px solid #bbb;
}
.verify .verify-error,
.verify .verify-success {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  left: 0;
  box-sizing: border-box;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-family: Arail;
  top: -100%;
  -webkit-transition: 0.3s ease 0s;
  -moz-transition: 0.3s ease 0s;
  -ms-transition: 0.3s ease 0s;
  transition: 0.3s ease 0s;
}
.verify .verify-error p,
.verify .verify-success p {
  font-size: 30px;
  margin: 0;
}
.verify .verify-error span,
.verify .verify-success span {
  font-size: 15px;
  color: #555;
}
.verify .verify-error .verify-btn,
.verify .verify-success .verify-btn {
  border: 1px solid #ccc;
  padding: 3px 10px;
  display: inline-block;
  border-radius: 3px;
  font-size: 13px;
  margin-top: 20px;
  cursor: pointer;
}
.verify .verify-error .verify-btn:hover,
.verify .verify-success .verify-btn:hover {
  background: #f5f5f5;
}
.verify .verify-success p {
  color: #116311;
}
.verify .verify-error p {
  color: #8b0f0f;
}
.verify .verify-error.show,
.verify .verify-success.show {
  top: 0;
}
</style>
